<!-- 看成绩,测试通过，数据没给-->
<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入要查询的课程ID" v-model="courseName">
            <el-button slot="append" icon="el-icon-search" @click="searchCourse">
            </el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table
        :data=tableData
        border
        style="width: 100%">
        <el-table-column
            fixed
            prop="courseId"
            label="课程号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="courseName"
            label="课程"
            width="150">
        </el-table-column>
        <el-table-column
            prop="teacherName"
            label="教师名称"
            width="200">
        </el-table-column>
        <el-table-column
            prop="score"
            label="成绩"
            width="200">
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[1, 2, 3]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="firstFrom.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstFrom:{
        // 用于保存初始的条数
      total:0,
      },
      pageFrom:{
        page: 1,
        pageSize: 5,
        studentId:'',
        // 要传给后端的数据
      },
      // 用于成绩查询的检索
      courseName:'',
      total: 0,
      tableData: [
      ],
    }
  },
  created() {
    // 初始化操作
    if(localStorage.getItem("type") !== 'student'){this.$router.push(`/login`);this.$message.error('你不是个学生');}
    this.name = localStorage.getItem('name');
    this.pageFrom.studentId = localStorage.getItem('studentId');
    this.getOwnFirstGrade();
  },
  methods:{
     // 数据分页
    handleCurrentChange(currentPage) {
      this.pageFrom.pagenum = currentPage;
      // 每次更改都要请求一次tabledata数据，在后端做数据分页！>.<！
    },
    handleSizeChange(size) {
      this.pageFrom.pagesize = size;
      // 每次更改都要请求一次tabledata数据，在后端做数据分页！>.<！
    },
    // 获取课程信息表
    async getOwnGrade() {
    // JSON化
    const config = {
      headers: {
        'Content-Type':'application/json',
        'token':`${localStorage.getItem("token")}`// Custom request headerapi

      }
    };
    try {
      const { data: res } = await this.$http.post(`api/student/grade/page`,JSON.stringify(this.pageFrom),config);
      if (res.status !== 500) {
        this.tableData=res.data.record;
      } else {
        this.$message.error('获取失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('请求失败');
  }
    },
    // 获取初始信息表
    async getOwnFirstGrade() {
    // JSON化
    const config = {
      headers: {
        'Content-Type': 'application/json',
        'token':`${localStorage.getItem("token")}`// Custom request header

      }
    };
    try {
      const { data: res } = await this.$http.post(`api/student/grade/page`,JSON.stringify(this.pageFrom),config);
      if (res.status !== 500) {
        this.$message.success('成功获取我的成绩');
        this.tableData=res.data.records;
        this.firstFrom.total = res.data.total; // 保存总条数
      } else {
        this.$message.error('获取失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('请求失败');
  }
    },
    async searchCourse() {
      // 在这里执行你想要的点击事件的逻辑,嗨哟啊修改
      //console.log("点击了搜索按钮,要查询的课程ID是:" + JSON.stringify({...this.pageFrom, courseName: this.courseName}));
    // JSON化
    const config = {
      headers: {
        'Content-Type': 'application/json',
        'token':`${localStorage.getItem("token")}`// Custom request header

      }
    };
    try {
      const { data: res } = await this.$http.get(`api/student/grade/page`,JSON.stringify({...this.pageFrom, courseName: this.courseName}),config);
      if (res.status !== 500) {
        this.$message.success('成功搜索');
        this.tableData=res.data.records;
        this.firstFrom.total = res.data.total; // 保存总条数
      } else {
        this.$message.error('获取失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('请求失败');
  }
}

  // 还要加上一个查询课程成绩的接口，接口名称一样的
  }
}
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 30px;
  }
</style>
